<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是Demo组件</h1>
  <span>当前求和为：{{ sum }}</span><br>
  <button @click="sum++">点我+1</button>
  <button @click="sum--">点我-1</button>
  <hr>

  <h2>当前点击时鼠标的坐标为x：{{ point.x }} , y：{{ point.y }}</h2>
</template>

<script>
// 引入ref 函数
import {ref} from "vue";
import usePoint from "@/hooks/usePoint";

export default {
  name: 'DemoPage',
  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup() {
    // 【todo 通过 reactive 封装整个对象的方式来实现数据的响应式】
    let sum = ref(0);
    // let point = reactive({
    //   x: 0,
    //   y: 0,
    // });
    //
    // // 封装一下方法，用途是保存一个点
    // function savePoint(event) {
    //   console.log(event.pageX, event.pageY);
    //   point.x = event.pageX;
    //   point.y = event.pageY;
    // }
    //
    // // 挂载完毕生命周期钩子，挂载完毕就获取到鼠标的坐标
    // onMounted(() => {
    //   window.addEventListener('click', savePoint);
    // });
    // // 当卸载之前钩子
    // onBeforeUnmount(() => {
    //   window.removeEventListener('click', savePoint);
    // });

    // 使用hooks函数实现对上面的数据、方法、钩子进行封装
    let point = usePoint();

    // 方式一：返回对象【常用】
    return {
      sum,
      point,
    }
  },
}
</script>

<style>

</style>
